// 定义路由规则 -- 路由和组件的映射表;
import VueRouter from 'vue-router';
import Vue from 'vue'
// import store from '@/store'
// console.log('router-store', store);
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home', // 命名路由
        component: () => import('@/views/router-view/Home'),
        meta: {
            ishshowtabbar: true,
            auth: ['1', '2', '3'].includes(localStorage.getItem('role')),
            title: '首页'
        }
    },
    {
        path: '/category/:id', // 设置动态路由传值
        name: 'category', // 命名路由
        component: () => import('@/views/router-view/Category'),
        meta: {
            ishshowtabbar: true,
            auth: ['1', '2', '3'].includes(localStorage.getItem('role')),
            title: '分类'
        },
        // 路由独享守卫
        // beforeEnter: (to, from, next) => {
        //     if (from.path == '/home') {
        //         next(false)
        //         return
        //     }
        //     next()
        // }
    },
    {
        path: '/car/:id',
        name: 'car', // 命名路由
        component: () => import('@/views/router-view/Car'),
        meta: {
            ishshowtabbar: false,
            auth: ['1', '3'].includes(localStorage.getItem('role')),
            title: '购物车'
        }
    },
    {
        path: '/mine',
        name: 'mine', // 命名路由
        component: () => import('@/views/router-view/Mine'),
        children: [
            {
                path: '',
                component: () => import('@/views/router-view/Mine1'),
                meta: {
                    ishshowtabbar: false,
                    auth: ['1', '2', '3'].includes(localStorage.getItem('role'))
                }
            },
            {
                path: 'mine1',
                name: 'mine1', // 命名路由
                component: () => import('@/views/router-view/Mine1'),
                meta: {
                    ishshowtabbar: false
                }
            },
            {
                path: 'mine2',
                name: 'mine2', // 命名路由
                component: () => import('@/views/router-view/Mine2'),
                meta: {
                    ishshowtabbar: false
                }
            }
        ],
        meta: {
            ishshowtabbar: false,
            auth: ['1', '2'].includes(localStorage.getItem('role')),
            title: '我的'
        }
    },
    {
        path: '/login',
        component: () => import('@/views/router-view/Login'),
        meta: {
            ishshowtabbar: false,
            auth: true
        }
    },
    {
        path: '*',
        component: () => import('@/views/router-view/Notfind')
    }
]

const router = new VueRouter({
    routes,
    mode: 'history'
})

// 设置全局前置守卫
router.beforeEach((to, from, next) => {
    // to 下一个路由对象
    // from 上一个路由对象
    // next() 放行函数 没有参数 表示放行 有参数为false 表示不放行, 有参数为其他路径表示重定向
    let role = localStorage.getItem('role');
    // console.log('to', to);
    next()
    // 登录的守卫
    let token = localStorage.getItem('token');
    if (to.path != '/login') {
        if (token) {
            // 个别页面的守卫(有权限才能访问) 
            if (to.meta.auth) {
                next()
            } else {
                Vue.prototype.$message({
                    message: '您没有权限访问该菜单',
                    type: 'error'
                })
                next(false)
            }
        } else {
            next('/login')
        }
    } else {
        next()
    }
})



// 全局后置守卫 -- 修改页面的标题
router.afterEach((to, from) => {
    // 已经跳转完页面了
    document.title = to.meta.title
})







export default router
